<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、通勤概况分析</div>
<div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">近一周各市的通勤概况如下：</div>
<div id="od-avg-distance-time-desc" style="text-indent: 2em;font-size:20px;line-height: 35px;">
</div>
<div id="table2-desc" style="text-indent: 2em;font-size:20px;line-height: 35px;"></div>
<#--<table  id='table1' style="margin-top:15px;">
    <tr>
        <th>区县</th>
        <th>平均通勤距离</th>
    </tr>
</table>
<div style="margin-top: 10px; text-align: center; font-size: 20px;">表1 {{data}}市各区县平均通勤距离</div>-->
<div style="width: 1000px;margin: 16px auto;overflow: hidden;position: relative;">
    <select id="co_area_id_1" style="padding: 5px;min-width: 100px; position: absolute; right: 0;z-index: 1;"></select>
    <div id="myecharts1" style="width: 100%; height: 400px;"></div>
</div>
<div id="avg-distance-table-bottom-desc" style="margin-top: 10px; text-align: center; font-size: 20px;"></div>

<div style="width: 1000px;margin: 16px auto;overflow: hidden;position: relative;">
    <select id="co_area_id_2" style="padding: 5px;min-width: 100px; position: absolute; right: 0;z-index: 1;"></select>
    <div id="myecharts2" style="width: 100%; height: 400px;"></div>
    <div id="avg-cost-time-desc" style="margin-top: 10px; text-align: center; font-size: 20px;"></div>
</div>
<div id="avg-distance-table-2-bottom-desc" style="margin-top: 10px; text-align: center; font-size: 20px;"></div>

<div id="table3-desc" style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;"></div>
<table  id='table3' style="margin-top:15px;">
</table>
<div id="avg-distance-desc" style="margin-top: 10px; text-align: center; font-size: 20px;">表3 海口市通勤距离在不同区域的变化特征</div>
<script>
    (function () {
        $("#co_area_id_1").change(function () {
            change(1)
        })

        $("#co_area_id_2").change(function () {
            change(2)
        })
            <#--var dataTable1 = ${dataTable1}-->
        <#--var dataTable2 = ${dataTable2}-->
        /*var result1 = {
            "三沙市": [
                { area: "海口", count: 1006 },
                { area: "白沙", count: 565 },
                { area: "陵水", count: 4954 },
                { area: "三亚", count: 221 },
                { area: "琼海", count: 41 },
                { area: "文昌", count: 400 },
                { area: "万宁", count: 144 },
                { area: "东方", count: 94 },
                { area: "儋州", count: 664 },
            ],
            "文昌市": [
                { area: "海口", count: 1006 },
                { area: "白沙", count: 565 },
                { area: "陵水", count: 4954 },
                { area: "东方", count: 94 },
                { area: "儋州", count: 664 },
            ]
        };*/
        var result1 = ${odAvgTimeOrDistMap}
        /*var result2 = {
            "海口市": [
                { area: "琼山区", count: 1006 },
                { area: "美兰区", count: 565 },
                { area: "龙华区", count: 4954 },
                { area: "秀英区", count: 221 },
            ],
            "三亚市": [
                { area: "琼山区", count: 16 },
                { area: "美兰区", count: 565 },
                { area: "龙华区", count: 454 },
                { area: "秀英区", count: 22 },
            ],
        };*/
        var result2 = ${odAvgTimeOrDistMap}
        var dataTable3 = ${dataTable3}
        /*$("#table2-desc").text("以通勤距离度量{{data}}职住分离度，从{{data}}去到{{data}}区，职住分离度逐渐增大，{{data}}区的平均通勤距离高达{{data}}km（表1），{{data}}区的平均通勤耗时高达{{data}}min（表2）。")*/
        $("#table3-desc").text("由表3通勤距离在不同区域的变化特征可以发现，${dataTable3LessThan3km}内通勤距离在3km以内的人数最多，${dataTable3MoreThan60km}内通勤距离在50km以上的人数最多。")
        $(document).ready(function(){
            // $.each(dataTable1,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.distance+'</td>';
            //     $("#table1").append('<tr>'+tr+'</tr>')
            // });
            // $.each(dataTable2,function(index,item){
            //     var tr='<td>'+item.county+'</td>'+'<td>'+item.time+'</td>';
            //     $("#table2").append('<tr>'+tr+'</tr>')
            // });
            var resultKey1 = [], resultData1 = [];
            var resultKey2 = [], resultData2 = [];
            $.each(result1,function(key, item) {
                resultKey1.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#co_area_id_1").append(option)
            });
            $.each(result2,function(key, item) {
                resultKey2.push(key);
                var option="<option value="+key+">"+key+"</option>";
                $("#co_area_id_2").append(option)
            });
            // 取第一个的值
            resultData1 = resultKey1.length>0? result1[resultKey1[0]]: [];
            resultData2 = resultKey2.length>0? result2[resultKey2[0]]: [];

            initEcharts1(resultData1);
            initEcharts2(resultData2);

            if(dataTable3){
                var th='<th>&nbsp;</th>';
                $.each(dataTable3.head,function(index,item){
                    th += '<th>'+item.name+'</th>';
                });
                $("#table3").append('<tr>'+th+'</tr>');
                $.each(dataTable3.data,function(index,item){
                    var tr='<td>'+item.peopleCount+'</td>';
                    $.each(dataTable3.head,function(index1,item1){
                        tr += '<td>'+item[item1.field]+'</td>';
                    });
                    $("#table3").append('<tr>'+tr+'</tr>')
                });
            }
        });
        function getOptionBar(barXAxisData, countValues, title, color) {
            var option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: color?color: ['#4b91ff'],
                legend: false,
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    data: barXAxisData,
                },
                yAxis: {
                    type: "value",
                    boundaryGap: [0, 0.01],
                    axisLabel: {
                        fontSize: 14,
                        show: true,
                        formatter: function(params) {
                            var result = ''
                            result = params / 1000
                            if (params > 1000) {
                                return result + '千米'
                            } else {
                                return params
                            }
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        data: countValues
                    }
                ]
            }
            return option
        }
        function getTargetArea(area) {
            if (area === "秀英区" || area === "琼山区" || area === "府城区" || area === "龙华区") {
                return "海口市"
            }
            if (area !== "海口市") {
                return "其它市县"
            }
        }
        function initEcharts1(datas, dd) {
            var myecharts = echarts.init(document.getElementById("myecharts1"));
            var barXAxisData = $.map(datas, function(n, i){ return n.county  });
            var countValues = $.map(datas, function(n, i){ return n.distance });
            var optionBar = getOptionBar(barXAxisData, countValues, '各区平均通勤距离');
            myecharts.setOption(optionBar);
            $("#od-avg-distance-time-desc").html(datas[0].desc);
            if (dd) {
                $("#avg-distance-table-bottom-desc").html("图1 " + dd + "平均通勤距离");
            } else {
                $("#avg-distance-table-bottom-desc").html("图1 " + getTargetArea(datas[0].county) + "平均通勤距离");
            }
        }
        function initEcharts2(datas, dd) {
            var myecharts = echarts.init(document.getElementById("myecharts2"));
            var barXAxisData = $.map(datas, function(n, i){ return n.county  });
            var countValues = $.map(datas, function(n, i){ return n.time });
            var optionBar = getOptionBar(barXAxisData, countValues, '各区平均通勤耗时');
            myecharts.setOption(optionBar);
            if (dd) {
                $("#avg-cost-time-desc").html("图2 " + dd + "平均通勤耗时");
                $("#avg-distance-desc").html("表3 " + dd + "通勤距离在不同区域的变化特征");
            } else {
                $("#avg-cost-time-desc").html("图2 " + getTargetArea(datas[0].county) + "平均通勤耗时");
                $("#avg-distance-desc").html("表3 " + getTargetArea(datas[0].county) + "通勤距离在不同区域的变化特征");
            }
        }
        function change(type) {
            var areaId = document.getElementById('co_area_id'+'_'+type);
            var d1 = areaId.options[areaId.selectedIndex].value;
            var d2 = areaId.value;
            if(type===1) initEcharts1(result1[d2], d1)
            if(type===2) initEcharts2(result2[d2], d1)
        }
    })()
</script>